<template>
<div>
    <ComPageList ref="ComPageList" :pageParamAll="pageParamAll">
        
    </ComPageList>
    <!-- 权限配置对话框 -->
        <el-dialog
        :visible.sync="permissionDialogFormVisible"
        title="权限配置"
        @close="jurisdictionCancel"
        :close-on-click-modal="false"
        >
        <el-tree
            ref="tree"
            :data="systemPermissions"
            :props="cateListProps"
            show-checkbox
            node-key="id"
            highlight-current
        >
            <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>{{ data.label }}</span>
            <el-tag v-if="data.api" type="success" size="mini">{{
                data.api
            }}</el-tag>
            </span>
        </el-tree>
        <div slot="footer" class="dialog-footer">
            <el-button @click="jurisdictionCancel">取消</el-button>
            <el-button
            type="primary"
            :loading="btnLoading"
            @click="updatePermission"
            >确定</el-button
            >
        </div>
        </el-dialog>
</div>
</template>
<script>
import {
  getPermission,
  updatePermission,
  permissionCurrentUser
} from '@/api/role'
export default {
    data(){
        return {
          pageParamAll:{},

          dialogFormVisible: false,
          permissionDialogFormVisible: false,
            systemPermissions: [],
            cateListProps: {
                value: 'id', //匹配响应数据中的id
                label: 'name' //匹配响应数据中的name
            },
            assignedPermissions: null,
            permissionForm: {
                roleId: undefined,
                menuIds: []
            },
            btnLoading: false,
            row:{},
        }
    },
    created(){
        this.initPageParam();
        this.initForm();
    },
    methods:{
        jurisdictionCancel () {
            this.permissionDialogFormVisible = false
            this.systemPermissions = []
        },
        // 获取权限列表
        getJurisdiction () {
            permissionCurrentUser().then(res => {
                console.log('22222222222222', res)
                let arr = res.data.data
                arr.forEach(i => {
                i.data.children = []
                if (i.children) {
                    i.children.forEach(j => {
                    i.data.children.push(j.data)
                    })
                }
                this.systemPermissions.push(i.data)
                console.log("this.systemPermissions",this.systemPermissions)
                })
                getPermission(Number(this.row.id)).then(response => {
                    this.roleDataRec(response.data.data)
                })
            })
        },
        handlePermission (row) {
            this.permissionDialogFormVisible = true
            this.permissionForm.roleId = Number(row.id)
            this.row=row
            this.getJurisdiction()
            
        },
        // 递归
        roleDataRec (data) {
            data.forEach(i => {
                if (i.data.checked) {
                this.$refs.tree.setChecked(i.data.id, true)
                }
                if (i.children) {
                this.roleDataRec(i.children)
                }
            })
        },
        updatePermission () {
        let menuIds = [
            ...this.$refs.tree.getHalfCheckedKeys(),
            ...this.$refs.tree.getCheckedKeys()
        ]
        console.log('1111111111111111', this.$refs.tree.getCheckedKeys())
        this.permissionForm.menuIds = menuIds
        this.btnLoading = true
        updatePermission(this.permissionForm)
            .then(response => {
            this.btnLoading = false
            this.permissionDialogFormVisible = false
            this.systemPermissions = []
            this.$notify.success({
                title: '成功',
                message: '授权成功'
            })
            })
            .catch(response => {
            this.btnLoading = false
            this.$notify.error({
                title: '失败',
                message: response.data.errmsg
            })
            })
        },




        validateUserName:(rule, value, callback) => {
          var reg = /^[0-9A-Za-z/]{1,32}$/ //8-16位且同时包含数字和字母
          if (value === '') {
            callback(new Error('请输入角色名称'))
          } else if (!reg.test(value)) {
            callback(new Error('角色名称由32位以内的数字、大小写字母组成!'))
          } else {
            callback()
          }
        },
        
        initForm:function(){
            var that = this ;
            this.pageParamAll.formDesign = {
                    // asterisk:true,
                    formItems : [
                        {
                            prop:'name',
                            label:'角色名称：',
                            type:'input',
                            // rules: [
                            //     { required: true, message: '角色名称不能为1空', trigger: 'blur' },
                            //     { validator: this.validateUserName, trigger: 'blur' }
                            //   ],
                        },
                        {
                            prop:'description',
                            label:'角色描述：',
                            type:'textarea',
                            // rules:
                            //   [
                            //     { required: true, message: '角色描述不能为1空', trigger: 'blur' },
                                
                            //   ],
                        },
                        // {
                        //     prop:'isValidate',
                        //     label:'是否有效',
                        //     type:'switch',
                        //     active:'yes',
                        //     inactive:'no',
                        // }
                    ],
                     rules: {
                      name: [
                        { required: true, message: '角色名称不能为空', trigger: 'blur' },
                        { validator: this.validateUserName, trigger: 'blur' }
                      ],
                      description: [
                        { required: true, message: 'description不能为空', trigger: 'blur' },
                        
                      ],
                    },
                };
            this.pageParamAll.btns=[{
                    name: "保存",
                    type: '',
                    icon: 'el-icon-edit',
                    click: function () {
                        that.$refs.ComPageList.saveForm();
                    }
                }]
        },
        initPageParam : function(){
            var that = this ;
            this.pageParamAll.pageParam = {
                isPagination:true,//是否分页
                isQualitySearch:false,//是否高级查询
                // searchParam : {
                //     placeholder:'请输入角色名称',
                //     maxlength:50,
                // },
                searchParam : [
                {
                    placeholder:'请输入角色名称',
                    maxlength:50,
                    prop : "keyword",
                    label : "角色名称",
                },
                // {
                //     placeholder:'请输入角色id',
                //     maxlength:50,
                //     prop : "id",
                //     label : "角色ID",
                // },
                ],
                conditions:this.conditions,//高级查询项
                btns : [
                    {
                        name:'新增',
                        type:'primary',
                        icon:'el-icon-circle-plus-outline',
                        click:function(){
                            that.$refs.ComPageList.viewForm(null);
                        }
                    },{
                        name:this.$t('common.batchDelete'),
                        type:'danger',
                        icon:'el-icon-delete',
                        click:function(){
                            that.$refs.ComPageList.deleteAll();
                        }
                    }
                ],
                tableParam : {//表单参数
                    border:true,//是否有边框
                    script:true,
                    highlightCurrentRow:true,//单行选择
                    maxHeight:"1500",//最大高度
                    multi:false,//是否为多选
                    columns:[{
                        prop : "name",
                        label : "角色名称",
                        fixed : 'left',
                        sortable : true,
                        // fixedDirect : 'left',
                        // width : "15"
                    },{
                        prop : "description",
                        label : "角色描述",
                        // width : "20"
                    },
                    // {
                    //     prop:"isValidate",
                    //     label:"是否有效",
                    //     // width:"15",
                    // },
                    // {
                    //     prop : "createTime",
                    //     label : "创建时间",
                    //     // width : "15",
                    //     formatter:function(row){
                    //         return that.normalFormat(row.updateTime,"yyyy-MM-dd");
                    //     }
                    // },{
                    //     prop : "updateTime",
                    //     label : "更新时间",
                    //     // width : "15",
                    //     formatter:function(row){
                    //         return that.normalFormat(row.updateTime,"yyyy-MM-dd");
                    //     }
                    // },
                    {
                        prop : "",
                        label : "操作",
                        width : "18",
                        sortable:'',
                        // fixedDirect:'right',
                        opers:[
                            {
                                name:"编辑",
                                type:'',
                                icon:'el-icon-edit',
                                disabled:["id","1"],
                                click:function(row){
                                    that.$refs.ComPageList.viewForm(row);
                                }
                            }, {
                                name:'删除',
                                type:'danger',
                                icon:'el-icon-delete',
                                disabled:["id","1"],
                                click:function(row){
                                    that.$refs.ComPageList.delete(row);
                                }
                            }
                            , {
                                name:'授权',
                                // type:'danger',
                                // icon:'el-icon-delete',
                                disabled:["id","1"],
                                click:function(row){
                                    that.handlePermission(row);
                                    // that.$refs.ComPageList.handlePermission(row);
                                }
                            }
                        ]
                    }],
                },
                initData:{
                    url:'/role/page',
                    params:{
                        "pageSize":10,
                        "pageNum":1,
                        "entity":{}
                    },
                    addUrl:{
                      url:"/role/",
                      methods:'post',
                    },
                    updateUrl:{
                      url:"/role/",
                      methods:'put',
                    },
                    delUrl:{
                      url:"/role/",
                      methods:'post',
                    },
                    actionName:"角色",
                    pagination:{
                      "pageSize":10,
                      "pageNum":1,
                      "total":0,
                    }
                },
            }
        },
    }

}


</script>
<style scoped>




</style>





























